<!--
  ~ Copyright (c) 2014-2020 Bjoern Kimminich.
  ~ SPDX-License-Identifier: MIT
  -->

<div fxLayoutAlign="center">
  <mat-card class="mat-elevation-z6">
     <h1 translate>ADD_NEW_ADDRESS</h1>
     <div class="form-container" id="address-form">
        <mat-form-field appearance="outline" color="accent">
           <mat-label translate>LABEL_COUNTRY</mat-label>
           <input [formControl]="countryControl" type="text" [placeholder]="'MANDATORY_COUNTRY' | translate"
           matInput>
           <mat-error *ngIf="countryControl.invalid && countryControl.errors.required" translate>
              MANDATORY_COUNTRY
           </mat-error>
        </mat-form-field>
        <mat-form-field appearance="outline" color="accent">
           <mat-label translate>LABEL_NAME</mat-label>
           <input [formControl]="nameControl" type="text" [placeholder]="'MANDATORY_NAME' | translate"
           matInput>
           <mat-error *ngIf="nameControl.invalid && nameControl.errors.required" translate>
              MANDATORY_NAME
           </mat-error>
        </mat-form-field>
        <mat-form-field appearance="outline" color="accent">
           <mat-label translate>LABEL_MOBILE_NUMBER</mat-label>
           <input [formControl]="numberControl" type="number" [placeholder]="'MANDATORY_NUMBER' | translate"
           matInput>
           <mat-error *ngIf="numberControl.invalid && numberControl.errors.required" translate>
              MANDATORY_NUMBER
           </mat-error>
           <mat-error
           *ngIf="numberControl.invalid && (numberControl.errors.min || numberControl.errors.max)"
           translate [translateParams]="{range: '1000000-9999999999'}">INVALID_MOBILE_NUMBER
           </mat-error>
        </mat-form-field>
        <mat-form-field appearance="outline" color="accent">
           <mat-label translate>LABEL_ZIP_CODE</mat-label>
           <input #pin [formControl]="pinControl" type="text" [placeholder]="'MANDATORY_ZIP' | translate"
           matInput>
           <mat-hint align="end">{{pin.value?.length || 0}}/8</mat-hint>
           <mat-error *ngIf="pinControl.invalid && pinControl.errors.required" translate>
              MANDATORY_ZIP
           </mat-error>
        </mat-form-field>
        <mat-form-field appearance="outline" color="accent">
           <mat-label translate>LABEL_ADDRESS</mat-label>
           <textarea #adress id="address" [formControl]="addressControl" matInput [placeholder]="'MANDATORY_ADDRESS' | translate"
                     matAutosizeMinRows="4" matAutosizeMaxRows="4" matTextareaAutosize cols="50" maxlength="160"></textarea>
           <mat-hint translate>
             <i class="fas fa-exclamation-circle"></i>
             <em style="margin-left:5px;" translate>{{ 'MAX_TEXTAREA_LENGTH' | translate: {length: '160'} }}</em>
           </mat-hint>
           <mat-hint align="end">{{adress.value?.length || 0}}/160</mat-hint>
           <mat-error *ngIf="addressControl.invalid && addressControl.errors.required" translate>MANDATORY_ADDRESS</mat-error>
        </mat-form-field>
        <mat-form-field appearance="outline" color="accent">
           <mat-label translate>LABEL_CITY</mat-label>
           <input [formControl]="cityControl" type="text" [placeholder]="'MANDATORY_CITY' | translate"
           matInput>
           <mat-error *ngIf="cityControl.invalid && cityControl.errors.required" translate>
              MANDATORY_CITY
           </mat-error>
        </mat-form-field>
        <mat-form-field appearance="outline" color="accent">
           <mat-label translate>LABEL_STATE</mat-label>
           <input [formControl]="stateControl" type="text" [placeholder]="'STATE_PLACEHOLDER' | translate"
           matInput>
        </mat-form-field>
     </div>
    <div>
      <button mat-stroked-button class="btn-return" (click)="routeToPreviousUrl()">
        <mat-icon>
          navigate_before
        </mat-icon>
        {{'LABEL_BACK' | translate}}
      </button>
       <button type="submit" id="submitButton" mat-raised-button color="primary"
       [disabled]="countryControl.invalid || nameControl.invalid || numberControl.invalid || pinControl.invalid || addressControl.invalid || cityControl.invalid"
       (click)="save()">
         <i class="material-icons">
           send
         </i>
         {{'BTN_SUBMIT' | translate}}
       </button>
    </div>
  </mat-card>
</div>
